<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>慕课七夕主题</title>
    <script src="../js/55ac9a860001a6c500000000.js"></script>   <!--jQuery JavaScript Library v2.1.4-->
    <script src="../js/55ac9ea30001ace700000000.js"></script>  <!--jquery.transit-->

    <!--<script src="/dist/js/vendor/jquery-1.12.0.min.js"></script>-->

    <link rel="stylesheet" href="../css/style.css" type="text/css" />
    <link rel="stylesheet" href="pageA.css" type="text/css">
</head>

<body>
<div id='content'>
    <ul class='content-wrap'>
        <!-- 第一副画面 -->
        <li>
        <div class="a_background">
            <div class="a_background_top"></div>
            <div class="a_background_middle"></div>
            <div class="a_background_bottom"></div>
        </div>
        </li>
        <!-- 第二副画面 -->
        <li> 页面2 </li>
        <!-- 第三副画面 -->
        <li> 页面3 </li>
    </ul>
    <!--与页面根结点并列-->
    <!--小男孩-->
    <div id="boy" class ="charector slowWalk"></div>

    <div class="button">
        <button>开始</button>
        <!--<button>暂停</button>-->
    </div>
</div>
</body>
<script type="text/javascript">
    $(function () {
        var container = $('#content');
        var swipe = Swipe(container);

        ////////////////////////////////////////////////////////
        //=================== 动画处理 ====================== //
        ////////////////////////////////////////////////////////

        //////////
        // 小孩走路 //
        //////////



//        ////动作效果/////////

//        生成一个小男孩对象
//        开始走路，2秒走到页面的20%的距离
//        完成了设置一个颜色效果
//        继续走路，走到40%的区域
//        完成了设置一个颜色效果
//        继续走路，走到60%的区域
//        完成了设置一个颜色效果

        var boy = BoyWalk();

        //开始

        $('button:first').click(function () {
            // 开始第一次走路
            boy.walkTo(2000, 0.2)
                .then(function() {
                    //第一次走路完成
                    boy.setColoer('red')
                }).then(function () {
                     // 开始第2次走路
                return boy.walkTo(2000,0.4)
                }).then(function () {
                     //第2次走路完成
                boy.setColoer('yellow')
                }).then(function () {
                     // 开始第3次走路
                return boy.walkTo(2000,0.6)
            }).then(function () {
                     // 开始第3次走路
                boy.setColoer('blue')
            })
        });
    })

</script>

<script type="text/javascript" src="../js/Swipe.js"></script>
<!--<script type="text/javascript" src="../js/qixi.js"></script>-->

<script type="text/javascript" src="../js/BoyWalk.js"></script>
</html>
